<template>
  <div class="content">
    <el-card
      ><div class="classification">
        <div>
          <strong>一级分类</strong
          ><template>
            <el-select
              v-model="categoryOneValue"
              @change="categoryOneChange()"
              placeholder="请选择"
            >
              <el-option
                v-for="category in categoryOne"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              >
              </el-option>
            </el-select>
          </template>
        </div>
        <div>
          <strong>二级分类</strong
          ><template>
            <el-select
              v-model="categoryTwoValue"
              :disabled="categoryOneDisabled"
              @change="categoryTwoChange()"
              placeholder="请选择"
            >
              <el-option
                v-for="category in categoryTwo"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              >
              </el-option>
            </el-select>
          </template>
        </div>
        <div>
          <strong>三级分类</strong
          ><template>
            <el-select
              v-model="categoryThreeValue"
              :disabled="categoryTwoDisabled"
              @change="categoryThreeChange()"
              placeholder="请选择"
            >
              <el-option
                v-for="category in categoryThree"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              >
              </el-option>
            </el-select>
          </template>
        </div></div
    ></el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryOne: [], //一级分类
      categoryOneValue: "", //一级分类选中的值
      categoryTwo: [], //二级分类
      categoryTwoValue: "", //二级分类选中的值
      categoryThree: [], //三级分类
      categoryThreeValue: "", //三级分类选中的值
    };
  },
  mounted() {
    this.getCategoryOne();
  },
  methods: {
    //获取一级列表
    async getCategoryOne() {
      let res = await this.$api.product.getCategoryOne();
      if (res.code == 200) {
        this.categoryOne = res.data;
      }
    },
    //获取二级列表
    async getCategoryTwo(id) {
      let res = await this.$api.product.getCategoryTwo(id);
      if (res.code == 200) {
        this.categoryTwo = res.data;
      }
    },
    //获取三级列表
    async getCategoryThree(id) {
      let res = await this.$api.product.getCategoryThree(id);
      if (res.code == 200) {
        this.categoryThree = res.data;
      }
    },
    //一级分类选中
    categoryOneChange() {
      if (this.categoryOneValue !== "") {
        let id = this.categoryOneValue;
        this.getCategoryTwo(id);
      }
    },
    //二级分类选中
    categoryTwoChange() {
      if (this.categoryTwoValue !== "") {
        let id = this.categoryTwoValue;
        this.getCategoryThree(id);
      }
    },
    // 三级分类选中
    async categoryThreeChange() {
      // 获取商品列表
      let categoryId = {
        category1Id: this.categoryOneValue,
        category2Id: this.categoryTwoValue,
        category3Id: this.categoryThreeValue,
      };
      this.$emit('categoryIdInfo', categoryId)
    },
  },
  computed: {
    //一级分类选中
    categoryOneDisabled() {
      return this.categoryOneValue === "";
    },
    //二级分类选中
    categoryTwoDisabled() {
      return this.categoryTwoValue === "";
    },
  },
};
</script>

<style lang="scss" scoped>
.classification {
  display: flex;
  height: 80px;
  align-items: center;
  & div {
    margin-right: 20px;
  }
  & strong {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>